<template>
  <div class="express">

    <!-- 顶部切换导航 -->
    <van-tabs v-model="activeName">
      <!-- 导航1 国内件 -->
      <van-tab
        title="国内港澳台"
        name="domestic"
      >
        <van-tag
          plain
          class="poster"
          type="primary"
          size="large"
        >寄件人</van-tag>
        <van-contact-card
          v-if="
          posterInfo"
          type="edit"
          :name="posterInfo.name"
          :tel="posterInfo.tel"
          @click="addPoster"
          add-text="请选择寄件人"
        />
        <van-contact-card
          v-else
          type="add"
          @click="addPoster"
          add-text="请选择寄件人"
        />
        <van-tag
          plain
          class="poster"
          type="danger"
          size="large"
        >收件人</van-tag>
        <van-contact-card
          v-if="
          receiverInfo"
          type="edit"
          :name="receiverInfo.name"
          :tel="receiverInfo.tel"
          @click="addReceiver"
          add-text="请选择寄件人"
        />
        <van-contact-card
          v-else
          type="add"
          @click="addReceiver"
          add-text="请选择收件人"
        />

        <!-- 选择寄件的类型 -->
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
          />
          <van-dropdown-item
            v-model="value2"
            :options="option2"
          />
        </van-dropdown-menu>
        <van-goods-action>
          <van-checkbox v-model="checked">我已同意并接受<a>《快递服务协议》</a></van-checkbox>
          <van-goods-action-button
            color="#4D95FA"
            type="danger"
            text="提交"
            v-model="disabled"
            @click="submitInfo"
          />
        </van-goods-action>
      </van-tab>

      <!-- 导航2国际件 -->
      <van-tab
        title="国际件"
        name="internal"
      >
        <van-empty description="为了满足不同人的需求，我们陆续开通了欧洲、俄罗斯、印度尼西亚等国快递专线" />
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'Express',
  data() {
    return {
      activeName: 'domestic',
      show: false,
      checked: false,
      disabled: false,
      posterInfo: {}, // 寄件人信息数据
      receiverInfo: {}, // 收件人信息
      express: {}, // 所寄商品的信息
      expressInfo: {}, // 寄件人和收件人的信息
      value1: '文件',
      value2: '1',
      option1: [
        { text: '文件', value: '文件' },
        { text: '数码商品', value: '数码商品' },
        { text: '生活用品', value: '生活用品' },
        { text: '服饰', value: '服饰' },
        { text: '食品', value: '食品' },
        { text: '其它', value: '其它' }
      ],
      option2: [
        { text: '1 KG', value: '1' },
        { text: '2 KG', value: '2' },
        { text: '3 KG', value: '3' },
        { text: '其它', value: '其它' }
      ]
    }
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      Toast(item.name)
    },
    addPoster() {
      this.$router.push('/edit')
    },
    addReceiver() {
      this.$router.push('/receiver')
    },
    submitInfo() {
      if (this.checked) {
        if (this.posterInfo && this.receiverInfo) {
          this.express = { kind: this.value1, weight: this.value2 }
          this.expressInfo = { poster: this.posterInfo, receiver: this.receiverInfo, express: this.express }
          localStorage.setItem('expressInfo', JSON.stringify(this.expressInfo))
          Toast('提交成功！')
          console.log(this.expressInfo)
        } else {
          Toast('寄件人信息或收件人信息有误')
        }
      } else {
        Toast('请勾选同意服务协议')
      }
    }
  },
  created() {
    this.posterInfo = JSON.parse(localStorage.getItem('poster'))
    this.receiverInfo = JSON.parse(localStorage.getItem('receiver'))
  }
}
</script>

<style lang="less" scoped>
.poster {
  margin-top: 10px;
  border-radius: 6px;
}
.van-goods-action {
  padding-left: 10px;
}
.van-checkbox__label {
  color: #666666;
  a {
    color: #4d95fa;
  }
}
</style>
